#{extends 'layout.html' /}
#{set title:messages.get('plato.editarPlato') /}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--   <link rel="stylesheet" href="@{'/public/stylesheets/style.css'}"> -->
<!--   <script src="@{'/public/javascripts/modernizr-2.5.3.min.js'}"></script> -->

<link rel="stylesheet" href="@{'/public/stylesheets/style.css'}">
<link rel="stylesheet" href="@{'/public/stylesheets/jqamp-ui-spinner.min.css'}">
  <script type="text/javascript">
  
  	function guardarPlato(){
  		
  		if($("#nombre-plato").val() == ""){
  			mostrarMensajeAtencion("Campos incompletos.");
  			return;
  		}
  		
  		var platoJSON = '{"nombre": "' + $("#nombre-plato").val() + '","alimentos": [';
  		
  		var alimentos = new Array();
  		$( "#comidas .placeholder" ).children().each( function(){
  			platoJSON += '{"idAlimento": "' + $(this).find("#idAlimento").val() + '", "cantidadPorciones": "' + $(this).find("#selectPorciones").val() + '"},'
  		});
  		
  		//quito la última coma (no es necesaria)
		platoJSON = platoJSON.substring(0,platoJSON.length-1);
  		//agrego el cierre del json
  		platoJSON += ']}';
  		
  		var platoId = window.location.href.substring(window.location.href.search("/?id=") + 3, window.location.href.length);
  		
  		$.ajax({
  	        type: "POST",
  	        url: "/resto/platos/savePlatoAction/" + platoId,
  	        data: platoJSON,
  	        dataType: "json",
  	        contentType: "application/json"
  		}).done(function(resultado){
  	        	if(resultado.result == "establecimiento_alimenticio"){
  	        		window.location="/resto/platos";
  	        	}else {
  	        		if(resultado.result == "nutri"){
  	        			window.location="/nutri/platos";
  	        		}else{
  	    		    	alert("No se pudo crear el plato. Intente de nuevo más tarde...");
  	        		}
  	        	}
  	      	}
  	      );
  		
  		
  	}
  	
  	function buscarAlimento() {
		$.ajax({
			url: "/nutri/platos/buscarAlimento/"+$("#textAlimento").val(),
			cache: false
			}).done(function(resultado) {
				$("#resultadoAlimentos").empty();
				
				// se itera el resultado json y se genera cada alimento
				$.each(resultado, function(i, val) {
					var img = "@{'/public/images/icons/Salad-icon.png'}";
					
					// TODO: clonar elelemento en lugar de usar el string
					//$result = $("#modeloAlimento").clone();
					var elemento = "<div class=\"alimentoSmall\">" +
					               "<div class=\"deleteBtn\"><a href=\"#\" class=\"deleteAlimento\">u</a></div>" +
					               "<div class=\"alimentoImage\"><img src=\"" +img+ "\" alt=\"" +resultado[i].nombre+"\" /></div>" +
								   "<input type=\"hidden\" id=\"idAlimento\" name=\"idAlimento\" value=\""+resultado[i].id+"\"> " +
								   "<input type=\"hidden\" id=\"caloriasPorPorcion\" value=\""+resultado[i].caloriasPorPorcion+"\"> " +
								   "<input type=\"hidden\" id=\"cantidadPorcionesAnterior\" value=\"1\">" + 
								   "<h3>" + resultado[i].nombre + "</h3>" +
								   "<div class=\"alimentoStepper\">" +
 								   "<select id=\"selectPorciones\" onchange=\"javascript:cambiarCantidadPorciones(this);\"> " +
 								   "<option selected=\"selected\" value=\"1\">1</option>" +
 								   "<option value=\"2\">2</option>" +
								   "<option value=\"3\">3</option>" +
								   "<option value=\"4\">4</option>" +
								   "<option value=\"5\">5</option>" +
								   "</select>"+
 								   "</div" +
								   "</div>";
					console.log(elemento);
					$("#resultadoAlimentos").prepend(elemento);
				});
				
				$("#resultadoAlimentos .alimentoSmall").draggable({
					appendTo: "body",
					helper: "clone"
				});
		});
	}
	
 	// actualiza las calorias de la dieta
 	function actualizarCalorias(calorias) {
 		var caloriasActualizadas = parseFloat($('#kcal').text()) + calorias;
 		$('#kcal').text(caloriasActualizadas);
 	}

 	function cambiarCantidadPorciones(unSelect) {
 		var porcionDeAlimento = $(unSelect).parent().parent();
 		var calorias = parseFloat(porcionDeAlimento.find('#caloriasPorPorcion').val());
 		var cantidadPorcionesAnterior = parseInt(porcionDeAlimento.find('#cantidadPorcionesAnterior').val());
		//recuerdo cuál era la cantidad anterior de porciones seleccionadas en el alimento actual
 		porcionDeAlimento.find('#cantidadPorcionesAnterior').val($(unSelect).val());
 		var caloriasAnteriores = calorias * cantidadPorcionesAnterior;
 		
 		//resto las calorías actuales
 		actualizarCalorias(caloriasAnteriores * -1);
 		//agrego según la nueva cantidad
 		actualizarCalorias(calorias * parseInt($(unSelect).val()));
 	}
 	</script>
</head>
<body>
	<ul id="porcionesPlatoList" style="display:none;">
		#{list items:plato.getPorcionesAlimentos(), as:'porcionAlimento'}
			<li id="${porcionAlimento.id}" value="${porcionAlimento.cantidad}">${porcionAlimento.alimento.nombre}</li>
	    #{/list}
	</ul>
    <input type="hidden" id="json" name="json" value=""/>
  
  	<div id="flexbox">
    
    	<div id="flexLeft">
        	<div id="comidas">  
                  
        		<h3><a href="#">Plato</a>&nbsp;&nbsp;&nbsp;<input id="nombre-plato" placeholder="Ingrese el nombre del plato"></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        		<span id="kcal">0</span> kcal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="guardarPlato()" value="Guardar"></input></h3>
                <div class="placeholder" style="width:580px; height:340px;"></div>
			</div>
		</div>
		
        <div id="flexRight">
        </div>
        
        <div id="flexRight">
        
	       	<div id="buscador">
    	      	<h2>&{'plato.buscadorAlimentos'}</h2>
        	  	<input type="text" id="textAlimento" title="Buscar alimentos" />
          		<button id="buscarAlimento" onclick="buscarAlimento();"> &{'plato.buscarAlimentos'}</button>
          		<!-- Poner llamada ajax -->
          		<div id="resultadoAlimentos">
          			
          		</div>
			</div>
    	</div>
    </div>
  
  <!-- JavaScript at the bottom for fast page loading -->
  <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}"></script>
  <script src="@{'/public/javascripts/jquery.livequery.js'}"></script>  
  <script src="@{'/public/javascripts/jquery-ui-1.8.21.custom.min.js'}"></script>
<!--   <script src="@{'/public/javascripts/plugins.js'}"></script> -->
<!--   <script src="@{'/public/javascripts/script.js'}"></script> -->
	<script src="@{'/public/javascripts/jqamp-ui-spinner.js'}"></script>
	<script src="@{'/public/javascripts/jqamp-ui-spinner-numeric.js'}"></script>

  <script>
  	$(function() {
  		
  		//enter buscar alimentos
  		$("#textAlimento").keypress(function(event) {
  		  if ( event.which == 13 ) {
  			 buscarAlimento();
  		   }
  		});
  		
		
		/* COMIDA */
		
		/* Hacer draggable los elementos frecuentes */
		$( "#frecuentes .alimentoSmall" ).draggable({
			appendTo: "body",
			helper: "clone"
		});
		
		/* Hacer droppable div.placeholder */
		$( "#comidas .placeholder" ).droppable({
			activeClass: "ui-state-default",
			hoverClass: "ui-state-hover",
			accept: ":not(.ui-sortable-helper)",
			drop: function( event, ui ) {
				/* Insertar el elemento dentro de div.placeholder como child en el primer lugar */	
				$comida = ui.draggable;
				$a = $(this);
				
				auxCalorias = parseFloat($comida.find('#caloriasPorPorcion').val());
				actualizarCalorias(auxCalorias);

				var comibleId = $comida.find('#idAlimento').val();
				var existe = false;
				
				// identifica los alimentos existentes para la comidad y evalua si se debe modificar la cantidad o agregarlo
				$.each($a.find(".alimentoBig"), function(i, item){
					if (comibleId == $(item).find("#idAlimento").val()) {
						// agrega 1 unidad a la cantidad existente del comible en el combo
						var cantAnterior = parseInt($(item).find(".alimentoStepper select").val());
						$(item).find(".alimentoStepper select").val(cantAnterior + 1);
						existe = true;
				 	}
				 });
				
				if (!existe) {
					// se agrega en la UI
					$( "<div class='alimentoBig'></div>" ).html( ui.draggable.html() ).prependTo( this );
				}
			}
		}).sortable({
			items: "li:not(.placeholder)",
			sort: function() {
				$( this ).removeClass( "ui-state-default" );
			}
		});
		
		/* Link para borrar el alimento - Debe ser livequery porque los elementos son agregados dinámicamente y no pertenecen al DOM */
		$('a.deleteAlimento').livequery('click', function() {
			
			$element = $(this).parent().parent();
			console.log($element);
			//eliminarlos del dominio
			var aux = $(this).parent().parent();
			var caloriasAux = parseFloat(aux.find('#caloriasPorPorcion').val());
			var cantPorciones =  parseInt($element.find("#selectPorciones").val());
			actualizarCalorias(caloriasAux * cantPorciones * -1 );
			aux.remove();
			return false;
		});
		
		/* Stepper numéricos */
		var btnOpts = {
        	position: 'inside',
            up: {
                icon: 'ui-icon-triangle-1-n',
                title: 'Increment the value.'
            },
            down: {
                icon: 'ui-icon-triangle-1-s',
                title: 'Decrement the value.'
            },
            defaultAction: 'step',
            ctrlAction: 'halfStep',
            shiftAction: 'page'};
		var opts = {
                disabled: false,
                readonly: false,
                keyboard: {
                    allowed: null,
                    upDownArrows: {
                        defaultAction: 'step',
                        ctrlAction: 'halfStep',
                        shiftAction: 'page'
                    },
                    pageUpDown: true
                },
                mousewheel: {
                    defaultAction: 'step',
                    ctrlAction: 'halfStep',
                    shiftAction: 'page'
                },
                buttons: btnOpts,
                //incremental: true,
                //delay: 5000,
                //format: null,
                //parse: function(val) { return parseFloat(val) || 0; },
                min: false,
                max: false,
                empty: false,
                //step: 1,
                //halfStep: 0.5,
                //page: 10,
                
                // Events
                start: function(event) { console.log('Start Event Triggered.'); },
                spin: function(event, ui) { console.log('Spin Event Triggered; value: ' + ui.value); },
                stop: function(event) { console.log('Stop Event Triggered.'); },
                change: function(event) { console.log('Change Event Triggered.'); }
            };
		
           //  var spinner = $('.stepper').spinner(opts);
			
			$('.stepper').livequery(function(){
				$(this).spinner(opts);
			}); 
	});
  	
  		
  		var platoId = window.location.href.substring(window.location.href.search("/?id=") + 3, window.location.href.length);
  		
  		$.ajax({
  			url: "/platos/getNombre/"+platoId,
  			cache: false
  			}).done(function(resultado) {
  				$("#nombre-plato").attr("value",resultado);
  		});

  		$.ajax({
  			url: "/platos/getCaloriasPlato/"+platoId,
  			cache: false
  			}).done(function(resultado) {
  				actualizarCalorias(parseInt(resultado));
  		});

  		$.ajax({
  			url: "/paciente/dietas/buscarPlatos/"+platoId,
  			cache: false
  			}).done(function(resultado) {
  				$("#resultadoAlimentos").empty();
  				
  				if ($.isEmptyObject(resultado)) {
  					$("#resultadoAlimentos").html("No se encontraron resultados para esta búsqueda");
  				}
  				
  				// se itera el resultado json y se genera cada alimento
  				jQuery.each(resultado, function(i, val) {
  					var img = "@{'/public/images/icons/Salad-icon.png'}";
  					
  					// TODO: clonar elelemento en lugar de usar el string
  					//$result = $("#modeloAlimento").clone();
  					var elemento = "<div class=\"deleteBtn\"><a href=\"#\" class=\"deleteAlimento\">u</a></div>" +
  					               "<div class=\"alimentoImage\"><img src=\"" +resultado[i].iconPath+ "\" alt=\"" +resultado[i].nombre+"\" /></div>";
  					             
  		                       		if(resultado[i].iconPath == "/public/images/icons/Plato-icon.png"){
  		                       			elemento +="<div class=\"miniAutorBtn\"><a href=\"#\" class=\"contactoAutor\">.</a></div>";
  		                       		}
  				               
  								   elemento += "<input type=\"hidden\" id=\"idAlimento\" name=\"idAlimento\" value=\""+resultado[i].id+"\"> " +
  								   "<input type=\"hidden\" id=\"caloriasPorPorcion\" value=\""+resultado[i].caloriasPorPorcion+"\"> " +
  								   "<input type=\"hidden\" id=\"cantidadPorcionesAnterior\" value=\""+resultado[i].cantidad+"\"> " +
  								   
  								   "<h3>" + resultado[i].nombre + "</h3>" +
  								   "<div class=\"alimentoStepper\">" +
  								   "<select id=\"selectPorciones\" onchange=\"javascript:cambiarCantidadPorciones(this);\">";
  									   
  									   switch(parseInt(resultado[i].cantidad))
  									   {
  									   case 1: {
  										elemento = elemento + "<option selected=\"selected\" value=\"1\">1</option>" +
  									   "<option value=\"2\">2</option>" +
  									   "<option value=\"3\">3</option>" +
  									   "<option value=\"4\">4</option>" +
  									   "<option value=\"5\">5</option>" +
  									   "</select>"+
  									   "</div>";
  									   }
  									   break;
  									   case 2: elemento = elemento +  "<option value=\"1\">1</option>" +
  									   "<option selected=\"selected\" value=\"2\">2</option>" +
  									   "<option value=\"3\">3</option>" +
  									   "<option value=\"4\">4</option>" +
  									   "<option value=\"5\">5</option>" +
  									   "</select>"+
  									   "</div>";
  									   break;
  									   case 3: elemento = elemento +  "<option value=\"1\">1</option>" +
  									   "<option value=\"2\">2</option>" +
  									   "<option selected=\"selected\" value=\"3\">3</option>" +
  									   "<option value=\"4\">4</option>" +
  									   "<option value=\"5\">5</option>" +
  									   "</select>"+
  									   "</div>";
  									   break;
  									   case 4: elemento = elemento +  "<option value=\"1\">1</option>" +
  									   "<option value=\"2\">2</option>" +
  									   "<option value=\"3\">3</option>" +
  									   "<option selected=\"selected\" value=\"4\">4</option>" +
  									   "<option value=\"5\">5</option>" +
  									   "</select>"+
  									   "</div>";
  									   break;
  									   case 5: elemento = elemento +  "<option value=\"1\">1</option>" +
  									   "<option value=\"2\">2</option>" +
  									   "<option value=\"3\">3</option>" +
  									   "<option value=\"4\">4</option>" +
  									   "<option selected=\"selected\" value=\"5\">5</option>" +
  									   "</select>"+
  									   "</div>";
  									   break;
  									   default: elemento = elemento +  "<option selected=\"selected\" value=\"1\">1</option>" +
  									   "<option value=\"2\">2</option>" +
  									   "<option value=\"3\">3</option>" +
  									   "<option value=\"4\">4</option>" +
  									   "<option value=\"5\">5</option>" +
  									   "</select>"+
  									   "</div>";
  									   }
  									   
  									   "<option selected=\"selected\" value=\"1\">1</option>" +
  									   "<option value=\"2\">2</option>" +
  								   "<option value=\"3\">3</option>" +
  								   "<option value=\"4\">4</option>" +
  								   "<option value=\"5\">5</option>" +
  								   "</select>"+
  									   "</div>";
  					console.log(elemento);
  					
  					$( "<div class='alimentoBig'></div>" ).html( elemento ).prependTo( $( "#comidas .placeholder" ));
  				});
  				
  				$("#resultadoAlimentos .alimentoSmall").draggable({
  					appendTo: "body",
  					helper: "clone"
  				});
  		});

  </script>
  <!-- end scripts -->
	
	<div id="atencion-div" style="display:none;"><p id="texto-atencion-div" ></p></div>
	
</body>
<!-- /html-->